<template>
	<div id="process">
		<p>{{service_status.text}}</p>
		<div class="operation">
			<el-form :inline="true" class="demo-form-inline">
				<el-form-item label="评估表操作">
					<el-radio-group v-model="radio">
						<el-radio class="radio" :label="index" v-for="(item,index) in service_status.option" :key="index">{{item.label}}</el-radio>
					</el-radio-group>
				</el-form-item>
				<template v-for="item in extra" v-if="hasExtra">
					<el-form-item :label="item.placeholder">
						<div class="extra">
							<el-select v-model="formData.doctor" filterable :placeholder="item.placeholder" v-if="item.type=='select'">
								<el-option v-for="cell in doctors" :key="cell.value" :label="cell.label" :value="cell.value">
								</el-option>
							</el-select>
							<!--textarea还未绑定model-->
							<el-input v-if="item.type=='textarea'" v-model="formData.remark" type="textarea" :autosize="{ minRows: 1, maxRows: 4}" :placeholder="item.placeholder">
							</el-input>
						</div>
					</el-form-item>
					
				</template>
				<el-form-item>
				    <el-button type="primary" @click="onSubmit" class="submit">确认提交</el-button>
				    <!--<el-button>取消</el-button>-->
				  </el-form-item>
			</el-form>
		</div>

	</div>
</template>

<script>
	import codeUtils from '../utils/Code.js'
	export default {
		name: 'wt-view',
		props: {
			value: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				doctors: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				value8: '',
				//服务单状态
				service_status:null,
				radio: null,
				formData: {
					target_sc_status:null,
					target_order_status:null,
				}
			}
		},
		computed: {
			extra: function() {
				if(this.service_status != null && this.radio != null) {
					let value = this.service_status.option[this.radio].value
					this.formData.target_sc_status = value.target_sc_status
					this.formData.target_order_status = value.target_order_status
					return this.service_status && this.service_status.option[this.radio].extra
				}
				return false
			},
			hasExtra: function() {
				return !!this.extra
			}
		},
		created() {
			/*if(LA.permissions.indexOf('evaluation-service')){
				this.service_status = codeUtils.parse(this.value)['evaluation-service']
			}elseif(LA.permissions.indexOf('evaluation-approve')){
				this.service_status = codeUtils.parse(this.value)['evaluation-approve']
			}*/
			this.service_status = codeUtils.parse(this.value)['evaluation-service'];
		},
		methods:{
			onSubmit:function(){
				console.log(this.formData)
			}
		},
		watch: {
			extra: function(val) {
				console.log(this.formData)
			}
		}
	}
</script>

<style lang="less">
	#process {
		text-align: left;
		p {
				color:#48576a;
				font-weight: 600;
				padding: 6px 0;
				margin-bottom:0;
			}
		.operation {
			.el-form-item,
			.el-form-item__content {
				width: 100%;
				margin-bottom:0;
			}
			label{
				padding-bottom:0;
			}
			.submit{
				margin-top:10px;
			}
		}
	}
</style>